<template>
  <div>
    <el-row>
      <span style="color: #44883e;font-size: 33px;float: left;margin-left: 100px">贾豆|豆品</span><br>
    </el-row>
    <el-row>
      <span style="color: black;font-size: 33px;float: left;margin-left: 100px">确认订单信息</span>
    </el-row>
    <el-row>
      <span style="color: green;font-size: 33px;float: left;margin-left: 100px">收货人信息</span>
    </el-row>
    <div style="margin-bottom: 20px;margin-left: 100px">
      <el-button
        size="small"
        @click="addTab(editableTabsValue)"
      >
        <span style="font-size: 33px;">新增地址&nbsp;+</span>
      </el-button>
    </div>
    <div style="margin-left: 100px">
      <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
        >
          <div style="float:left;font-size: 33px;color: black;text-align: left">
            <el-row>
              <span>收货人:{{item.receiveName}}</span>
            </el-row>
            <el-row>
              <span>{{item.addressDetail}} </span>
            </el-row>
            <el-row>
              <span>联系电话:{{item.phone}}</span>
            </el-row>
            <el-row style="color: deeppink;font-size: 33px">
              <el-link type="danger" style="font-size: 24px">设为默认地址</el-link>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-link type="danger" @click="dialogVisible=true" style="font-size: 22px;width:200px;height: 50px">
                修改地址
              </el-link>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :open="openCallback()"
      :before-close="handleClose">
      <div style="height: 300px;padding-top: 30px">

        <el-row>
          <span
            style="font-size: 30px;float:left;margin-left: 20px;font-weight:bold">
           <span style="width: 300px"><span style="color: deeppink">*</span>收货人姓名:{{nowaddress.receiveName}}</span> &nbsp;&nbsp;&nbsp;<input
            type="index" style="width: 500px;height: 40px"></span>
        </el-row>
        <el-row>
          <span style="font-size: 30px;float:left;margin-left: 20px;font-weight:bold"><span
            style="width: 300px"><span
            style="color: deeppink">*</span>收货人地址:{{nowaddress.addressDetail}}</span>&nbsp;&nbsp;&nbsp;<input
            type="index"
            style="width: 500px;height: 40px"></span>
        </el-row>
        <el-row>
          <span style="font-size: 30px;float:left;margin-left: 20px;font-weight:bold"><span
            style="width: 400px"><span style="color: deeppink;width: 300px">*</span>联系电话:{{nowaddress.phone}}</span>&nbsp;&nbsp;&nbsp;<input
            type="index" style="width: 500px;height: 40px"></span>
        </el-row>
        <el-button type="success" style="width: 200px;height: 55px;font-size: 33px;margin-top: 30px"
                   @click="dialogVisible = false">保存信息
        </el-button>
      </div>
      </span>
    </el-dialog>
    <el-row>
      <span style="color: #44883e;font-size: 33px;float: left;margin-left: 100px">贾豆|豆品</span><br>
    </el-row>
    <el-row>
      <el-col :span="9">
        <div class="grid-content bg-purple">
          <span style="color: black;font-size: 27px">商品信息</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light"><span style="color: black;font-size: 27px">单价（元）</span></div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple"><span style="color: black;font-size: 27px">数量</span></div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light">
          <span style="color: black;font-size: 27px">小计（元）</span>
        </div>
      </el-col>
    </el-row>
    <br><br>
    <el-row>
      <el-col :span="9">
        <el-row>
          <el-col :span="4" style="margin-left: 50px">
            <div class="grid-content bg-purple">
              <div class="demo-image">
                <div class="block" v-for="fit in fits" :key="fit">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :fit="fit"></el-image>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light">
              <span style="font-size: 22px;color: black;text-align: left">{{proname}}</span>
            </div>
          </el-col>
        </el-row>

      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light"><span style="color: black;font-size: 27px">{{price}}</span></div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple"><span style="color: black;font-size: 27px">{{num}}</span></div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light">
          <span style="color: black;font-size: 27px">{{total}}</span>
        </div>
      </el-col>
    </el-row>
    <br><br>
    <el-row style="font-size:30px">
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-row>
            <span><span>商品总价</span></span>
          </el-row>
          <el-row>
            <span style="color:deeppink">¥:{{total}}</span>
          </el-row>
        </div>
        <el-divider direction="vertical"></el-divider>
      </el-col>

      <el-col :span="5" >
        <div class="grid-content bg-purple-light">
          <el-row>
            <span>优惠券</span>
          </el-row>
          <el-row>
            <span style="color: #475669">暂无可用</span>
          </el-row>
        </div>
      </el-col>
      <el-divider direction="vertical" style="color: black;width: 11px"></el-divider>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-row>
            <span>运费<i class="el-icon-question"></i></span>
          </el-row>
          <el-row>
            <span style="color: #475669">已包邮</span>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <span>共计{{num}}件商品,应付金额:<span style="color: deeppink">¥{{total}}</span></span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-button type="danger" style="width: 60%;height: 65px;font-size: 33px;" @click="toPay(total)">去支付
          </el-button>
        </div>
      </el-col>
    </el-row>
    <div v-html="alireturn">{{alireturn}}</div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        nowaddress: {
          receiveName: '',
          phone: '',
          addressDetail: ''
        },
        receiveName: '',
        address: '',
        phone: '',
        alireturn: '',
        myprice: '',
        proname: '',
        price: '',
        num: '',
        total: '',
        fits: ['fill'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        dialogVisible: false,
        editableTabsValue: '2',
        editableTabs: [{
          title: '地址一',
          receiveName: '',
          phone: '',
          addressDetail: ''
        }, {
          title: '地址二',
          receiveName: '',
          phone: '',
          addressDetail: ''
        }],
        tabIndex: 2
      }
    },
    methods: {
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: '新地址',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }, toPay: function (total) {
        const newTab = window.open();
        axios.post('/bean/alipay/page/gotoPayPage').then(res => {
          console.log(res.data)
          const div = document.createElement('div');
          div.innerHTML = res.data; // html code
          newTab.document.body.appendChild(div);
          newTab.document.forms[0].submit();
        })
      }, updateAddress: function (item) {
        var _this = this;
        _this.nowaddress.receiveName = item.receiveName;
      }, handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },openCallback:function () {

      }
    }, mounted: function () {
      this.proname = this.$route.params.proname;
      this.price = this.$route.params.price;
      this.num = this.$route.params.num;
      this.total = this.price.replace("¥", '') * this.num;
      var _this = this;
      axios.get('/bean/bean/findAddress').then(function (res) {
        _this.editableTabs = res.data;
      })
    }
  }
</script>

<style scoped>

</style>
